import React, {
    PureComponent
} from 'react';

import {
    View,
    StyleSheet
} from 'react-native';

import {
    Layout,
    TabView
} from '../../../components';

import Account from './account';
import General from './general';
import Seeking from './seeking';
import Photo from './photo';
import About from './about';
import Step from './components/step';

import Connect from '../../../utils/connect';
import * as Const from "../../../const";

interface State {
    page:number
}

interface Props {
    user:any,
    isFull:boolean,
    initPage:number,
    userActions:any
}

const pages:Array<any> = [
    Account,
    General,
    Seeking,
    About,
    Photo
]

@Connect([`user`])
class Index extends PureComponent<Props, State> {
    constructor(props:Props) {
        super(props);
        this.state = {
            page:props.initPage
        }
    }

    static defaultProps = {
        initPage:0,
        isFull:false,
        userActions:{}
    }

    get userState() {
        const {
            user
        } = this.props;

        const {
            loginUser
        } = user;

        return loginUser || {};
    }

    get userId() {
        const {
            userId = 0
        } = this.userState;
        return userId;
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    private onStepChange = (
        page:number
    ) => {
        this.setState({
            page
        })
    }

    private renderPage = (
        Page:any,i:number
    ) => {
        const {
            isFull,
            initPage
        } = this.props;

        const hasPre = (
            isFull ? initPage !== i : true
        )

        return (
            <Page
                key={i}
                page={i}
                hasPre={hasPre}
                onPageChange={this.onStepChange}
            />
        )
    }

    get showBack() {
        const {
            isFull
        } = this.props;

        if(!!this.userId) {
            return false
        }
        else {
            return !isFull;
        }
    }

    render() {
        const {
            page
        } = this.state;
        return (
            <Layout
                close={true}
                fixed={true}
                scroll={false}
                title="Sign up"
                padding={false}
                backShow={this.showBack}
            >
                <View style={styles.lineStyle}/>
                <View style={styles.container}>
                    <View style={styles.content}>
                        <Step step={page}/>
                        <TabView
                            page={page}
                            locked={true}
                            animation={false}
                        >
                           {pages.map(this.renderPage)}
                        </TabView>
                    </View>
                </View>
            </Layout>
        )
    }
}

export default Index;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop:6,
        paddingHorizontal:16
    },
    content:{
        flex:1,
        overflow:`hidden`
    },
    lineStyle:{
        left:0,
        right:0,
        height:60,
        position:`absolute`,
        backgroundColor:Const.color
    }
}) as any;